<template>
  <div class="body_bgi full p_10 relative">
    <div class="w_full h_50 relative">
      <bigscreen-header headerName="少儿国际超模大赛随机排序" />
    </div>

    <div class="w_95_p h_full-70 m_0_auto">
      <div class="w_full h_40 lh_40 flex_row_start ph_10">
        <div 
          class="w_25_p text_center ph_10 fs_24 relative font_zh ls_3 cursor" 
           :class="groupId == group.id ? 'main_color' : 'color_fff'"
          v-for="(group, index) in groupList" :key="index"
          @click="clickGroup(group)"
        >
          {{ group.name }}
          <div class="bottom_border" v-show="groupId == group.id"></div>
        </div>
      </div>

      <div class="w_full h_20"></div>

      <div class="w_full flex_row_start fs_1_5vw color_fff pb_10">
        <div class="fw_bold w_80 text_center">序号</div>
        <div class="fw_bold w_120 text_left ml_40">图片</div>
        <div class="fw_bold w_500 text_left pl_30">姓名</div>
        <div class="fw_bold w_200 text_left">性别</div>
        <div class="fw_bold w_200 text_left">年龄</div>
      </div>

      <div 
        class="w_full h_full-170 overflow_y_auto scroll_box_1 list_box" ref="list_box"
        v-loading="isShowLoading"  
        element-loading-text="随机排序中..."
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div 
          class="w_full h_120 lh_120 cursor mb_10 list_item" :id="index"
          :class="{ border_1_s_f001 : scroll_index == index }"
          ref="list_item"
          v-for="(item, index) in personList" :key="index"
        >
          <div class="full flex_row_start fs_1_5vw pr_10">
            <div class="w_80 h_120 color_fff font_zh text_center">{{ item.personNumber }}</div>

            <div class="w_full-80 h_120 flex_row_start bgc_fff border_radius_10 ml_30 relative">
              <div class="w_120 h_120 p_5 text_center">
                <img class="h_full fit_cover border_radius_5 mt_0" v-if="item.avatar" :src="formatUserImg(item.avatar)" alt="">
                <img class="w_full fit_cover border_radius_5 mt_0" v-else src="../assets/image/user.png" alt="">
              </div>
              <div class="w_500 text_left fw_bold pl_50 ellipsis">{{ item.name }}</div>
              <div class="w_200 pl_30 font_zh">{{ formatGender(item.sex) }}</div>
              <div class="w_200 pl_30 font_zh">{{ item.age }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getPersonTypeList, getPersonRankList, randSort, getPersonListByTypeId } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  var scroll_timer = null
  var random_timer = null

  export default {
    name: 'FinalRanking',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        isShowLoading: false,
        isRandomList: false,

        groupId: null,
        groupList: [],

        personList: [],

        scroll_index: 0,
      }
    },
    async mounted() {
      // 获取分组列表
      this.getPersonTypeList()

      document.addEventListener('keydown', this.handleKeyDown)
    },
    destroyed() {
      clearInterval(random_timer)
      random_timer = null
    },
    methods: { 
      // 获取 分组列表
      async getPersonTypeList() {
        let res = await getPersonTypeList()
        try {
          if (res.code == 1000) {
            this.groupList = res.data
            this.groupId = res.data[0].id

            // 获取 默认选手排序列表
            this.getPersonListByTypeId(res.data[0].id)
          }
        } catch(err) {
          console.log('获取分组列表失败 : ', err);
        }
      },

      // 开始随机排序
      async randSort(groupId) {
        let res = await randSort(groupId)
        try {
          if (res.code == 1000) {
            this.isShowLoading = true
            this.isRandomList = true

            // 显示 动画
            random_timer = setInterval(() => {
              this.randomList()
            }, 100)
          }
        } catch(err) {
          console.log('随机排序失败 : ', err);
        }
      },

      // 获取 随机排序 后的选手列表
      async getPersonListByTypeId(groupId) {
        let res = await getPersonListByTypeId(groupId)
        try {
          if (res.code == 1000) {
            this.isShowLoading = false
            this.isRandomList = false

            clearInterval(random_timer)
            random_timer = null
            
            this.personList = res.data
          }
        } catch(err) {
          console.log('获取 随机排序后的选手列表失败 : ', err);
        }
      },

      // 点击 【空格】 开始排序
      handleKeyDown(event) {
        if (event.keyCode == 32) {
          if (!this.isRandomList) {
            this.randSort(this.groupId)
          } else {
            this.getPersonListByTypeId(this.groupId)
          }
        }
      },

      // 获取 最终 排名
      async getPersonRankList(groupId) {
        let res = await getPersonRankList(groupId)
        try {
          if (res.code == 1000) {
            this.personList = res.data
            this.isShowLoading = false

            this.$nextTick(() => {
              let item_height = this.$refs.list_item.offsetHeight
              console.log('item_height : ', item_height);
            })

            this.scroll_index = 0

            if (scroll_timer) {
              clearInterval(scroll_timer)
              scroll_timer = null
            }

            let count = 2

            // scroll_timer = setInterval(() => {
            //   if (this.scroll_index < res.data.length -1) {
            //     if (this.scroll_index == 0) {
            //       if (count > 0) {
            //         count --
            //       } else {
            //         count = 2
            //         this.scroll_index ++
            //         this.autoAcroll(this.scroll_index)
            //       }
            //     } else {
            //       this.scroll_index ++
            //       this.autoAcroll(this.scroll_index)
            //     }
            //   } else {
            //     this.scroll_index = 0
            //     this.autoAcroll(this.scroll_index)
            //   }
            // }, 1000 * 1)
          }
        } catch(err) {
          console.log('获取排名失败 : ', err);
        }
      },

      // 格式化 图片,
      formatUserImg(str) {
        let list = str.split(',')

        return list[0]
      },
      
      formatMingCi(index) {
        let result = ''
        if (index == 0) {
          result = '一等奖'
        } else if (index == 1 ) {
          result = '二等奖'
        } else if (index == 2) {
          result = '三等奖'
        } else {
          result = ''
        }
        return result
      },

      formatGender(val) {
        return val == 0 ? '男' : '女'
      },

      // 点击分组
      clickGroup(item) {
        clearInterval(random_timer)
        random_timer = null

        this.groupId = item.id

        this.personList = []

        this.getPersonListByTypeId(item.id)
      },

      goToPage(path) {
        this.$router.push(path)
      },

      autoAcroll(index) {
        this.$refs.list_box.scrollTo(0, index * 130)
      },

      randomList() {
        this.personList = this.personList.sort(() => {
          return (0.5-Math.random());
        });
      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }

  .list_box { scroll-behavior: smooth; }
  .bgc_final_ranking { background-color: #c7865d; }
</style>